<template>
  <div style="text-align: center;
    height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;">
    <!-- 申请职位和申请日期步骤 -->
    <div style="margin-top: 100px;">
      <div v-if="step === 1">
        <h2>&emsp;&emsp;&emsp;&ensp;{{ from.applicationDepartment }}员工入职资料表</h2>
        <span>申请职位:<input v-model="from.applicationPosition" /></span>
        <span>申请日期:
          <!-- <input type="number" v-model="applicationYear" placeholder="年" /> -->
          <input type="number" min="1000" class="day" v-model="from.applicationYear" placeholder="年" />
          <input type="number" min="1" max="12" class="day" v-model="from.applicationMonth" placeholder="月" />
          <input type="number" min="1" max="31" class="day" v-model="from.applicationDay" placeholder="日" />
        </span>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;<button @click="nextStep">下一步</button>
        <router-link to="/main/renshi/dangan/information" style="margin: 20px 10px;">返回</router-link>
        <div>
          <router-link to="/main/ruzhi/nuwentrytable"
            style="margin: 20px 10px;text-decoration:none">写一个已经填完这个表的连接<br />下一步是 员工入职信息核定表 表</router-link>
        </div>
      </div>
      <!-- 个人基本资料 - 姓名、性别、出生年月、照片步骤 -->
      <div v-if="step === 2">
        <h2>一、个人基本资料</h2>
        <span>姓&emsp;&emsp;名:<input v-model="from.name" /></span>
        <span>性&emsp;&emsp;别:
          <select style="width: 217px;" v-model="from.gender">
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </span>
        <span>出生日期:
          <!-- <input type="number" v-model="birthYear" placeholder="年" /> -->
          <input type="number" min="1000" class="day" v-model="from.birthYear" placeholder="年" />
          <input type="number" min="1" max="12" class="day" v-model="from.birthMonth" placeholder="月" />
          <input type="number" min="1" max="31" class="day" v-model="from.birthDay" placeholder="日" />
        </span>
        <!-- 这里暂时用一个提示代替照片上传功能 -->
        <span style="display: flex; justify-content: space-between;">
          <span style="float: left;">照&emsp;&emsp;片:</span>
          <img v-if="from.imageUrl" :src="from.imageUrl" alt="Uploaded Photo"
            style="width: 35mm; height: 49mm;margin-right: 15%;" />
          <input v-else type="file" @change="handleFileUpload" accept="image/*" />
        </span>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button @click="previousStep">上一步</button>
        <button @click="nextStep">下一步</button>
        <router-link to="/main/renshi/dangan/information" style="margin: 20px 10px;">返回</router-link>
      </div>
      <!-- 个人基本资料 - 籍贯、身高、文化程度等步骤 -->
      <div v-if="step === 3">
        <h2>一、个人基本资料</h2>
        <span>籍&emsp;&emsp;贯:<input v-model="from.hometown" /></span>
        <span>身&emsp;&emsp;高:<input style="width: 182px;" type="number" min="1" v-model="from.height" />cm</span>
        <span>文化程度:<input v-model="from.educationLevel" /></span>
        <span>专&emsp;&emsp;业:<input v-model="from.major" /></span>
        <span>毕业学校:<input v-model="from.graduationSchool" /></span>
        <span>婚&emsp;&emsp;否:
          <select style="width: 217px;" v-model="from.married">
            <option value="是">是</option>
            <option value="否">否</option>
          </select>
        </span>
        <span>健康状况:<input v-model="from.healthCondition" /></span>
        <span>语言能力: 语种 <input style="width: 67px;" v-model="from.language" />(<input type="number" min="1"
            style="width: 30px" v-model="from.languageLevel" />级)
        </span>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button @click="previousStep">上一步</button>
        <button @click="nextStep">下一步</button>
        <router-link to="/main/renshi/dangan/information" style="margin: 20px 10px;">返回</router-link>
      </div>
      <!-- 个人基本资料 - 其他技能、特长等步骤 -->
      <div v-if="step === 4">
        <h2>一、个人基本资料</h2>
        <span>其他技能或持有专业证照:<input v-model="from.otherSkills" /></span>
        <span>特&emsp;&emsp;长:<input v-model="from.specialty" /></span>
        <span>现住地址:<input v-model="from.currentAddress" /></span>
        <span>联系电话:<input type="" v-model="from.contactPhone" /></span>
        <span v-if="phoneError" style="color: red;">{{ phoneError }}</span>
        <span>职位信息来源:<input v-model="from.jobInfoSource" /></span>
        <span>期望薪酬:<input type="number" min="1" v-model="from.expectedSalary" /></span>
        <span>最快到职日期:
          <input type="number" min="1" class="day" v-model="from.earliestStartYear" placeholder="年" />
          <input type="number" min="1" max="12" class="day" v-model="from.earliestStartMonth" placeholder="月" />
          <input type="number" min="1" max="31" class="day" v-model="from.earliestStartDay" placeholder="日" />
        </span>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button @click="previousStep">上一步</button>
        <button @click="nextStep">下一步</button>
        <router-link to="/main/renshi/dangan/information" style="margin: 20px 10px;">返回</router-link>
      </div>
      <!-- 个人基本资料 - 紧急联系人步骤 -->
      <div v-if="step === 5">
        <h2>紧急联系人</h2>
        <span>姓名（尽量为直系亲属）:<input v-model="from.emergencyContactName" /></span>
        <span>关&emsp;&emsp;系:<input v-model="from.emergencyContactRelation" /></span>
        <span>通讯地址:<input v-model="from.emergencyContactAddress" /></span>
        <span>电&emsp;&emsp;话:<input v-model="from.emergencyContactPhone" /></span>
        <span v-if="phoneError" style="color: red;">{{ phoneError }}</span>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button @click="previousStep">上一步</button>
        <button @click="nextStep">下一步</button>
        <router-link to="/main/renshi/dangan/information" style="margin: 20px 10px;">返回</router-link>
      </div>
      <!-- 受教育程度或培训经历步骤 -->
      <div v-if="step === 6">
        <h2>二、受教育程度或培训经历1</h2>
        <span>学校名称:<input v-model="from.schoolName" /></span>
        <span>专&emsp;&emsp;业:<input v-model="from.schoolMajor" /></span>
        <span>学&emsp;&emsp;历:
          <select style="width: 217px;" v-model="from.schoolEducation">
            <option value="小学">小学</option>
            <option value="初中">初中</option>
            <option value="高中">高中</option>
            <option value="大专">大专</option>
            <option value="本科">本科</option>
            <option value="硕士">硕士</option>
            <option value="博士">博士</option>
          </select>
        </span>
        <span>入学年月:
          <input type="number" min="1000" class="day" v-model="from.admissionYear" placeholder="年" />
          <input type="number" min="1" max="12" class="day" v-model="from.admissionMonth" placeholder="月" />
          <input type="number" disabled min="1" max="31" class="day" style="border: 0px;" />
        </span>
        <span>离校年月:
          <input type="number" min="1000" class="day" v-model="from.graduationYear" placeholder="年" />
          <input type="number" min="1" max="12" class="day" v-model="from.graduationMonth" placeholder="月" />
          <input class="day" disabled style="border: 0px;" />
        </span>
        <span>毕业结业:
          <select style="width: 217px;" v-model="from.graduationStatus">
            <option value="毕业">毕业</option>
            <option value="结业">结业</option>
          </select>
        </span>
        <span>有否证件:
          <select style="width: 217px;" v-model="from.hasCertificate">
            <option value="有">有</option>
            <option value="无">无</option>
          </select>
        </span>
        <span>备&emsp;&emsp;注:<input v-model="from.schoolNote" /></span>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button @click="previousStep">上一步</button>
        <button @click="nextStep">下一步</button>
        <router-link to="/main/renshi/dangan/information" style="margin: 20px 10px;">返回</router-link>
      </div>
      <div v-if="step === 7">
        <h2>二、受教育程度或培训经历2<span style="font-size: 16px;">(没有可以直接下一步)</span></h2>
        <span>学校名称:<input v-model="from.schoolName2" /></span>
        <span>专&emsp;&emsp;业:<input v-model="from.schoolMajor2" /></span>
        <span>学&emsp;&emsp;历:
          <select style="width: 217px;" v-model="from.schoolEducation2">
            <option value="小学">小学</option>
            <option value="初中">初中</option>
            <option value="高中">高中</option>
            <option value="大专">大专</option>
            <option value="本科">本科</option>
            <option value="硕士">硕士</option>
            <option value="博士">博士</option>
          </select>
        </span>
        <span>入学年月:
          <input class="day" v-model="from.admissionYear2" placeholder=" 年" type="number" min="1000" />
          <input class="day" v-model="from.admissionMonth2" placeholder="月" type="number" min="1" max="12" />
          <input class="day" disabled style="border: 0px;" />
        </span>
        <span>离校年月:
          <input class="day" v-model="from.graduationYear2" placeholder=" 年" type="number" min="1000" />
          <input class="day" v-model="from.graduationMonth2" placeholder="月" type="number" min="1" max="12" />
          <input class="day" disabled style="border: 0px;" />
        </span>
        <span>毕业结业:
          <select style="width: 217px;" v-model="from.graduationStatus2">
            <option value="毕业">毕业</option>
            <option value="结业">结业</option>
          </select>
        </span>
        <span>有否证件:
          <select style="width: 217px;" v-model="from.hasCertificate2">
            <option value="有">有</option>
            <option value="无">无</option>
          </select>
        </span>
        <span>备&emsp;&emsp;注:<input v-model="from.schoolNote2" /></span>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button @click="previousStep">上一步</button>
        <button @click="nextStep">下一步</button>
        <router-link to="/main/renshi/dangan/information" style="margin: 20px 10px;">返回</router-link>
      </div>
      <div v-if="step === 8">
        <h2>二、受教育程度或培训经历3<span style="font-size: 16px;">(没有可以直接下一步)</span></h2>
        <span>学校名称:<input v-model="from.schoolName3" /></span>
        <span>专&emsp;&emsp;业:<input v-model="from.schoolMajor3" /></span>
        <span>学&emsp;&emsp;历:
          <select style="width: 217px;" v-model="from.schoolEducation3">
            <option value="小学">小学</option>
            <option value="初中">初中</option>
            <option value="高中">高中</option>
            <option value="大专">大专</option>
            <option value="本科">本科</option>
            <option value="硕士">硕士</option>
            <option value="博士">博士</option>
          </select>
        </span>
        <span>入学年月:
          <input class="day" v-model="from.admissionYear3" placeholder=" 年" type="number" min="1000" />
          <input class="day" v-model="from.admissionMonth3" placeholder="月" type="number" min="1" max="12" />
          <input class="day" disabled style="border: 0px;" />
        </span>
        <span>离校年月:
          <input class="day" v-model="from.graduationYear3" placeholder=" 年" type="number" min="1000" />
          <input class="day" v-model="from.graduationMonth3" placeholder="月" type="number" min="1" max="12" />
          <input class="day" disabled style="border: 0px;" />
        </span>
        <span>毕业结业:
          <select style="width: 217px;" v-model="from.graduationStatus3">
            <option value="毕业">毕业</option>
            <option value="结业">结业</option>
          </select>
        </span>
        <span>有否证件:
          <select style="width: 217px;" v-model="from.hasCertificate3">
            <option value="有">有</option>
            <option value="无">无</option>
          </select>
        </span>
        <span>备&emsp;&emsp;注:<input v-model="from.schoolNote3" /></span>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button @click="previousStep">上一步</button>
        <button @click="nextStep">下一步</button>
        <router-link to="/main/renshi/dangan/information" style="margin: 20px 10px;">返回</router-link>
      </div>
      <!-- 工作经历步骤 -->
      <div v-if="step === 9">
        <h2>三、工作经历1</h2>
        <span>单位名称:<input v-model="from.companyName" /></span>
        <span>到职日期:
          <input class="day" v-model="from.joinYear" placeholder=" 年" type="number" min="1000" />
          <input class="day" v-model="from.joinMonth" placeholder="月" type="number" min="1" max="12" />
          <input class="day" disabled v-model="from.joinDay" style="border: 0px;" type="number" min="1" max="31" />
        </span>
        <span>离职年月:
          <input class="day" v-model="from.leaveYear" placeholder=" 年" type="number" min="1000" />
          <input class="day" v-model="from.leaveMonth" placeholder="月" type="number" min="1" max="12" />
          <input class="day" disabled style="border: 0px;" />
        </span>
        <span>工作职务:<input v-model="from.jobTitle" /></span>
        <span>底&emsp;&emsp;薪:<input type="number" v-model="from.baseSalary" /></span>
        <span>直系主管:<input v-model="from.directSupervisor" /></span>
        <span>离职原因:<input v-model="from.leaveReason" /></span>
        <span>查询电话:<input v-model="from.inquiryPhone" /></span>
        <span v-if="phoneError" style="color: red;">{{ phoneError }}</span>
        <span>详述工作经验:<textarea v-model="from.workExperienceDetail" /></span>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button @click="previousStep">上一步</button>
        <button @click="nextStep">下一步</button>
        <router-link to="/main/renshi/dangan/information" style="margin: 20px 10px;">返回</router-link>
      </div>
      <div v-if="step === 10">
        <h2>三、工作经历2<span style="font-size: 16px;">(没有可以直接下一步)</span></h2>
        <span>单位名称:<input v-model="from.companyName2" /></span>
        <span>到职日期:
          <input class="day" v-model="from.joinYear2" placeholder=" 年" type="number" min="1000" />
          <input class="day" v-model="from.joinMonth2" placeholder="月" type="number" min="1" max="12" />
          <input class="day" v-model="from.joinDay2" disabled style="border: 0px;" type="number" min="1" max="31" />
        </span>
        <span>离职年月:
          <input class="day" v-model="from.leaveYear2" placeholder=" 年" type="number" min="1000" />
          <input class="day" v-model="from.leaveMonth2" placeholder="月" type="number" min="1" max="12" />
          <input class="day" disabled style="border: 0px;" />
        </span>
        <span>工作职务:<input v-model="from.jobTitle2" /></span>
        <span>底&emsp;&emsp;薪:<input type="number" v-model="from.baseSalary2" /></span>
        <span>直系主管:<input v-model="from.directSupervisor2" /></span>
        <span>离职原因:<input v-model="from.leaveReason2" /></span>
        <span>查询电话:<input v-model="from.inquiryPhone2" /></span>
        <span v-if="phoneError" style="color: red;">{{ phoneError }}</span>
        <!-- <span>详述工作经验:<textarea v-model="from.workExperienceDetail2" /> -->
        <!-- </span> -->
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button @click="previousStep">上一步</button>
        <button @click="nextStep">下一步</button>
        <router-link to="/main/renshi/dangan/information" style="margin: 20px 10px;">返回</router-link>
      </div>
      <div v-if="step === 11">
        <h2>三、工作经历3<span style="font-size: 16px;">(没有可以直接下一步)</span></h2>
        <span>单位名称:<input v-model="from.companyName3" /></span>
        <span>到职日期:
          <input class="day" v-model="from.joinYear3" placeholder=" 年" type="number" min="1000" />
          <input class="day" v-model="from.joinMonth3" placeholder="月" type="number" min="1" max="12" />
          <input class="day" v-model="from.joinDay3" disabled style="border: 0px;" type="number" min="1" max="31" />
        </span>
        <span>离职年月:
          <input class="day" v-model="from.leaveYear3" placeholder=" 年" type="number" min="1000" />
          <input class="day" v-model="from.leaveMonth3" placeholder="月" type="number" min="1" max="12" />
          <input class="day" disabled style="border: 0px;" />
        </span>
        <span>工作职务:<input v-model="from.jobTitle3" /></span>
        <span>底&emsp;&emsp;薪:<input type="number" v-model="from.baseSalary3" /></span>
        <span>直系主管:<input v-model="from.directSupervisor3" /></span>
        <span>离职原因:<input v-model="from.leaveReason3" /></span>
        <span>查询电话:<input v-model="from.inquiryPhone3" /></span>
        <span v-if="phoneError" style="color: red;">{{ phoneError }}</span>
        <!-- <span>详述工作经验:<textarea v-model="from.workExperienceDetail3" /> -->
        <!-- </span> -->
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button @click="previousStep">上一步</button>
        <button @click="nextStep">下一步</button>
        <router-link to="/main/renshi/dangan/information" style="margin: 20px 10px;">返回</router-link>
      </div>
      <div v-if="step === 12">
        <h2>三、工作经历4<span style="font-size: 16px;">(没有可以直接下一步)</span></h2>
        <span>单位名称:<input v-model="from.companyName4" /></span>
        <span>到职日期:
          <input class="day" v-model="from.joinYear4" placeholder=" 年" type="number" min="1000" />
          <input class="day" v-model="from.joinMonth4" placeholder="月" type="number" min="1" max="12" />
          <input class="day" disabled style="border: 0px;" v-model="from.joinDay4" type="number" min="1" max="31" />
        </span>
        <span>离职年月:
          <input class="day" v-model="from.leaveYear4" placeholder=" 年" type="number" min="1000" />
          <input class="day" v-model="from.leaveMonth4" placeholder="月" type="number" min="1" max="12" />
          <input class="day" disabled style="border: 0px;" />
        </span>
        <span>工作职务:<input v-model="from.jobTitle4" /></span>
        <span>底&emsp;&emsp;薪:<input type="number" v-model="from.baseSalary4" /></span>
        <span>直系主管:<input v-model="from.directSupervisor4" /></span>
        <span>离职原因:<input v-model="from.leaveReason4" /></span>
        <span>查询电话:<input v-model="from.inquiryPhone4" /></span>
        <span v-if="phoneError" style="color: red;">{{ phoneError }}</span>
        <!-- <span>详述工作经验:<textarea v-model="from.workExperienceDetail4" /> -->
        <!-- </span> -->
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button @click="previousStep">上一步</button>
        <button @click="nextStep">下一步</button>
        <router-link to="/main/renshi/dangan/information" style="margin: 20px 10px;">返回</router-link>
      </div>
      <!-- 家庭成员步骤 -->
      <div v-if="step === 13">
        <h2>四、家庭成员1</h2>
        <span>姓&emsp;&emsp;名:<input v-model="from.familyName" /></span>
        <span>称&emsp;&emsp;谓:<input v-model="from.familyRelation" /></span>
        <span>年&emsp;&emsp;龄:<input v-model="from.familyAge" /></span>
        <span>任职机构或详细地址:<input v-model="from.familyAddress" /></span>
        <span>职&emsp;&emsp;称:<input v-model="from.familyTitle" /></span>
        <span>联络电话:<input v-model="from.familyPhone" /></span>
        <span v-if="phoneError" style="color: red;">{{ phoneError }}</span>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button @click="previousStep">上一步</button>
        <button @click="nextStep">下一步</button>
        <router-link to="/main/renshi/dangan/information" style="margin: 20px 10px;">返回</router-link>
      </div>
      <div v-if="step === 14">
        <h2>四、家庭成员2</h2>
        <span>姓&emsp;&emsp;名:<input v-model="from.familyName2" /></span>
        <span>称&emsp;&emsp;谓:<input v-model="from.familyRelation2" /></span>
        <span>年&emsp;&emsp;龄:<input v-model="from.familyAge2" /></span>
        <span>任职机构或详细地址:<input v-model="from.familyAddress2" /></span>
        <span>职&emsp;&emsp;称:<input v-model="from.familyTitle2" /></span>
        <span>联络电话:<input v-model="from.familyPhone2" /></span>
        <span v-if="phoneError" style="color: red;">{{ phoneError }}</span>
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button @click="previousStep">上一步</button>
        <button @click="nextStep">下一步</button>
        <router-link to="/main/renshi/dangan/information" style="margin: 20px 10px;">返回</router-link>
      </div>
      <!-- 声明步骤 -->
      <div v-if="step === 15">
        <p>
          1、申请人承诺未隐瞒任何身体疾病，否则由此造成的一切后果由申请人自行承担，申请人隐瞒的疾病导致其不能胜任申请职位的，公司有权终止劳动合同并无需支付任何经济补偿金或赔偿金。
        </p>
        <p>
          2、本人慎重申明以上所填各项及所持证件均属实，如有虚伪记载，愿受开除处分。
        </p>
        <!-- <span>申请人签名:<input v-model="from.signature" /></span> -->


        <div style="text-align: center">
          <!-- 签字板部分 -->
          <h2>请在这里签名</h2>
          <canvas style="border: 1px solid #ccc;" ref="signatureCanvas" :width="canvasWidth" :height="canvasHeight"
            @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing" @mouseout="stopDrawing"
            @touchstart="startDrawing" @touchmove="draw" @touchend="stopDrawing"></canvas>
          <div>
            <!-- 清除签名按钮 -->
            <button @click="clearSignature">清除签名</button>
            <!-- 保存签名按钮 -->
            <button @click="saveSignature">保存签名</button>
          </div>
        </div>


        <span style="margin-right: 40%;">日&emsp;&emsp;期:
          <input class="day" v-model="from.signYear" placeholder=" 年" type="number" min="1000" />
          <input class="day" v-model="from.signMonth" placeholder="月" type="number" min="1" max="12" />
          <input class="day" v-model="from.signDay" placeholder="日" type="number" min="1" max="31" />
        </span>
        &emsp;&emsp;&emsp;&emsp;<button @click="previousStep">上一步</button>
        <button @click="nextStep">保&emsp;存</button>
        <router-link to="/biao" style="margin: 20px 10px;">返回</router-link>
      </div>
    </div>
    <!-- 表格显示步骤 -->

  </div>
</template>

<script>
import axios from "axios";
// import { el } from "element-plus/es/locale";
export default {
  name: "ruZhi",
  data() {
    return {
      step: 1, // 当前步骤
      from: {
        applicationDepartment: this.$route.params.name,//申请部门
        // 步骤
        // 申请信息
        applicationPosition: "", // 申请职位
        applicationYear: "", // 申请日期年
        applicationMonth: "", // 申请日期月
        applicationDay: "", // 申请日期日
        // 个人基本资料
        name: "", // 姓名
        gender: "", // 性别
        birthYear: "", // 出生年
        birthMonth: "", // 出生年
        birthDay: "", // 出生日
        hometown: "", // 籍贯
        height: "", // 身高
        educationLevel: "", // 文化程度
        major: "", // 专业
        graduationSchool: "", // 毕业学校
        married: "", // 婚否
        healthCondition: "", // 健康状况
        language: "", // 语言能力语种
        languageLevel: "", // 语言能力级别
        otherSkills: "", // 其他技能或持有专业证照
        specialty: "", // 特长
        currentAddress: "", // 现住地址
        contactPhone: "", // 联系电话
        jobInfoSource: "", // 职位信息来源
        expectedSalary: "", // 期望薪酬
        earliestStartYear: "", // 最快到职日期年
        earliestStartMonth: "", // 最快到职日期月
        earliestStartDay: "", // 最快到职日期日
        emergencyContactName: "", // 紧急联系人姓名
        emergencyContactRelation: "", // 紧急联系人关系
        emergencyContactAddress: "", // 紧急联系人通讯地址
        emergencyContactPhone: "", // 紧急联系人电话
        imageUrl: "", // 照片
        // 受教育程度或培训经历1
        schoolName: "", // 学校名称
        schoolMajor: "", // 专业
        schoolEducation: "", // 学历
        admissionYear: "", // 入学年月
        admissionMonth: "", // 入学年月
        graduationYear: "", // 离校年月
        graduationMonth: "", // 离校年月
        graduationStatus: "", // 毕业或结业
        hasCertificate: "", // 有否证件
        schoolNote: "", // 备注
        // 受教育程度或培训经历2
        schoolName2: "", // 学校名称
        schoolMajor2: "", // 专业
        schoolEducation2: "", // 学历
        admissionYear2: "", // 入学年月
        admissionMonth2: "", // 入学年月
        graduationYear2: "", // 离校年月
        graduationMonth2: "", // 离校年月
        graduationStatus2: "", // 毕业或结业
        hasCertificate2: "", // 有否证件
        schoolNote2: "", // 备注
        // 受教育程度或培训经历3
        schoolName3: "", // 学校名称
        schoolMajor3: "", // 专业
        schoolEducation3: "", // 学历
        admissionYear3: "", // 入学年月
        admissionMonth3: "", // 入学年月
        graduationYear3: "", // 离校年月
        graduationMonth3: "", // 离校年月
        graduationStatus3: "", // 毕业或结业
        hasCertificate3: "", // 有否证件
        schoolNote3: "", // 备注
        // 工作经历
        companyName: "", // 单位名称
        joinYear: "", // 到职年月
        joinMonth: "", // 到职年月
        joinDay: "", // 到职日
        leaveYear: "", // 离职年月
        leaveMonth: "", // 离职年月
        jobTitle: "", // 工作职务
        baseSalary: "", // 底薪
        directSupervisor: "", // 直系主管
        leaveReason: "", // 离职原因
        inquiryPhone: "", // 查询电话
        workExperienceDetail: "", // 详述工作经验
        // 工作经历2
        companyName2: "", // 单位名称
        joinYear2: "", // 到职年月
        joinMonth2: "", // 到职年月
        joinDay2: "", // 到职日
        leaveYear2: "", // 离职年月
        leaveMonth2: "", // 离职年月
        jobTitle2: "", // 工作职务
        baseSalary2: "", // 底薪
        directSupervisor2: "", // 直系主管
        leaveReason2: "", // 离职原因
        inquiryPhone2: "", // 查询电话
        workExperienceDetail2: "", // 详述工作经验
        // 工作经历3
        companyName3: "", // 单位名称
        joinYear3: "", // 到职年月
        joinMonth3: "", // 到职年月
        joinDay3: "", // 到职日
        leaveYear3: "", // 离职年月
        leaveMonth3: "", // 离职年月
        jobTitle3: "", // 工作职务
        baseSalary3: "", // 底薪
        directSupervisor3: "", // 直系主管
        leaveReason3: "", // 离职原因
        inquiryPhone3: "", // 查询电话
        workExperienceDetail3: "", // 详述工作经验
        // 工作经历4
        companyName4: "", // 单位名称
        joinYear4: "", // 到职年月
        joinMonth4: "", // 到职年月
        joinDay4: "", // 到职日
        leaveYear4: "", // 离职年月
        leaveMonth4: "", // 离职年月
        jobTitle4: "", // 工作职务
        baseSalary4: "", // 底薪
        directSupervisor4: "", // 直系主管
        leaveReason4: "", // 离职原因
        inquiryPhone4: "", // 查询电话
        workExperienceDetail4: "", // 详述工作经验
        // 家庭成员
        familyName: "", // 家庭成员姓名
        familyRelation: "", // 家庭成员称谓
        familyAge: "", // 家庭成员年龄
        familyAddress: "", // 家庭成员任职机构或地址
        familyTitle: "", // 家庭成员职称
        familyPhone: "", // 家庭成员联络电话
        // 家庭成员2
        familyName2: "", // 家庭成员姓名
        familyRelation2: "", // 家庭成员称谓
        familyAge2: "", // 家庭成员年龄
        familyAddress2: "", // 家庭成员任职机构或地址
        familyTitle2: "", // 家庭成员职称
        familyPhone2: "", // 家庭成员联络电话
        // 声明
        // signature: null, // 申请人签名

        // signatureData: null,// 存储签名的 base64 数据

        signYear: "", // 声明日期年
        signMonth: "", // 声明日期月
        signDay: "", // 声明日期日
      },
      phoneError: '',//手机号错误提示

      signature: null, // 申请人签名

      // 标记是否正在绘制
      isDrawing: false,
      // 上一个绘制点的 x 坐标
      lastX: 0,
      // 上一个绘制点的 y 坐标
      lastY: 0,
      // 画布的宽度
      canvasWidth: 400,
      // 画布的高度
      canvasHeight: 200,

    };
  },
  // watch: {
  //   'from.emergencyContactPhone': {//监听紧急联系人电话
  //     immediate: true,
  //     handler()(newValue) {
  //       // 简单的手机号码正则表达式，验证 11 位数字，以 1 开头
  //       const phoneRegex = /^1[3-9]\d{9}$/;
  //       if (!phoneRegex.test(newValue) && newValue !== '') {
  //         this.phoneError = '请输入有效的手机号码';
  //       } else {
  //         this.phoneError = '';
  //       }
  //     },
  //   },
  //   'from.contactPhone': {//联系电话
  //     immediate: true,
  //     handler()(newValue) {
  //       // 简单的手机号码正则表达式，验证 11 位数字，以 1 开头
  //       const phoneRegex = /^1[3-9]\d{9}$/;
  //       if (!phoneRegex.test(newValue) && newValue !== '') {
  //         this.phoneError = '请输入有效的手机号码';
  //       } else {
  //         this.phoneError = '';
  //       }
  //     },


  //   }, 'from.inquiryPhone': {//查询电话
  //     immediate: true,
  //     handler()(newValue) {
  //       // 简单的手机号码正则表达式，验证 11 位数字，以 1 开头
  //       const phoneRegex = /^1[3-9]\d{9}$/;
  //       if (!phoneRegex.test(newValue) && newValue !== '') {
  //         this.phoneError = '请输入有效的手机号码';
  //       } else {
  //         this.phoneError = '';
  //       }
  //     },
  //   },
  //   'from.inquiryPhone2': {//查询电话
  //     immediate: true,
  //     handler()(newValue) {
  //       // 简单的手机号码正则表达式，验证 11 位数字，以 1 开头
  //       const phoneRegex = /^1[3-9]\d{9}$/;
  //       if (!phoneRegex.test(newValue) && newValue !== '') {
  //         this.phoneError = '请输入有效的手机号码';
  //       } else {
  //         this.phoneError = '';
  //       }
  //     },
  //   },

  //   'from.inquiryPhone3': {//查询电话
  //     immediate: true,
  //     handler()(newValue) {
  //       // 简单的手机号码正则表达式，验证 11 位数字，以 1 开头
  //       const phoneRegex = /^1[3-9]\d{9}$/;
  //       if (!phoneRegex.test(newValue) && newValue !== '') {
  //         this.phoneError = '请输入有效的手机号码';
  //       } else {
  //         this.phoneError = '';
  //       }
  //     },
  //   },
  //   'from.inquiryPhone4': {//查询电话
  //     immediate: true,
  //     handler()(newValue) {
  //       // 简单的手机号码正则表达式，验证 11 位数字，以 1 开头
  //       const phoneRegex = /^1[3-9]\d{9}$/;
  //       if (!phoneRegex.test(newValue) && newValue !== '') {
  //         this.phoneError = '请输入有效的手机号码';
  //       } else {
  //         this.phoneError = '';
  //       }
  //     },
  //   },

  //   'from.familyPhone': {//家庭成员联络电话
  //     immediate: true,
  //     handler()(newValue) {
  //       // 简单的手机号码正则表达式，验证 11 位数字，以 1 开头
  //       const phoneRegex = /^1[3-9]\d{9}$/;
  //       if (!phoneRegex.test(newValue) && newValue !== '') {
  //         this.phoneError = '请输入有效的手机号码';
  //       } else {
  //         this.phoneError = '';
  //       }
  //     },
  //   },
  //   'from.familyPhone2': {//家庭成员联络电话
  //     immediate: true,
  //     handler()(newValue) {
  //       // 简单的手机号码正则表达式，验证 11 位数字，以 1 开头
  //       const phoneRegex = /^1[3-9]\d{9}$/;
  //       if (!phoneRegex.test(newValue) && newValue !== '') {
  //         this.phoneError = '请输入有效的手机号码';
  //       } else {
  //         this.phoneError = '';
  //       }
  //     },
  //   },
  // },
  mounted() {

  },
  watch: {
    'from.emergencyContactPhone': { immediate: true, handler() { this.validatePhone(this.from.emergencyContactPhone) } },
    'from.contactPhone': { immediate: true, handler() { this.validatePhone(this.from.contactPhone) } },
    'from.inquiryPhone': { immediate: true, handler() { this.validatePhone(this.from.inquiryPhone) } },
    'from.inquiryPhone2': { immediate: true, handler() { this.validatePhone(this.from.inquiryPhone2) } },
    'from.inquiryPhone3': { immediate: true, handler() { this.validatePhone(this.from.inquiryPhone3) } },
    'from.inquiryPhone4': { immediate: true, handler() { this.validatePhone(this.from.inquiryPhone4) } },
    'from.familyPhone': { immediate: true, handler() { this.validatePhone(this.from.familyPhone) } },
    'from.familyPhone2': { immediate: true, handler() { this.validatePhone(this.from.familyPhone2) } },
  },
  methods: {
    validatePhone(newValue) {
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(newValue) && newValue !== '') {
        this.phoneError = '请输入有效的手机号码';
      } else {
        this.phoneError = '';
      }
    },
    // 开始绘制的方法
    startDrawing(e) {
      // 在组件挂载后获取 canvas 元素的 2D 上下文
      this.canvas = this.$refs.signatureCanvas;
      if (this.canvas) {
        this.ctx = this.canvas.getContext("2d");
        // 设置绘制线条的样式
        this.ctx.strokeStyle = "#000";
        this.ctx.lineWidth = 2;
        this.ctx.lineCap = "round";
      } else {
        console.error('Canvas element not found');
      }
      this.isDrawing = true;
      const { offsetX, offsetY } = this.getCoordinates(e);
      [this.lastX, this.lastY] = [offsetX, offsetY];
    },
    // 绘制的方法
    draw(e) {
      if (this.isDrawing) {
        const { offsetX, offsetY } = this.getCoordinates(e);
        if (this.ctx) {
          this.ctx.beginPath();
          this.ctx.moveTo(this.lastX, this.lastY);
          this.ctx.lineTo(offsetX, offsetY);
          this.ctx.stroke();
          [this.lastX, this.lastY] = [offsetX, offsetY];
        } else {
          console.error('Canvas context not found');
        }
      }
    },
    // 停止绘制的方法
    stopDrawing() {
      this.isDrawing = false;
    },
    // 清除签名的方法
    clearSignature() {
      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
      this.from.signature = null;
    },
    // 保存签名的方法
    saveSignature() {
      if (!this.canvas) {
        this.$message.error('请先签名');
        return;
      }
      this.from.signature = this.canvas.toDataURL("image/png");
      this.$message.success('保存成功');
      console.log("签名已保存:", this.from.signature);
      // 这里可以添加将签名数据发送到后端的逻辑
    },
    // 获取触摸或鼠标事件的坐标
    getCoordinates(e) {
      if (e.type.includes("touch")) {
        const rect = this.canvas.getBoundingClientRect();
        return {
          offsetX: e.touches[0].clientX - rect.left,
          offsetY: e.touches[0].clientY - rect.top
        };
      }
      return {
        offsetX: e.offsetX,
        offsetY: e.offsetY
      };
    },
    previousStep() {
      if (this.step > 1) {
        this.step--;
      }
    },
    nextStep() {
      const phoneRegex = /^1[3-9]\d{9}$/;
      const contactPhone = this.from.contactPhone;
      const emergencyContactPhone = this.from.emergencyContactPhone;
      const inquiryPhone = this.from.inquiryPhone;
      const inquiryPhone2 = this.from.inquiryPhone2;
      const inquiryPhone3 = this.from.inquiryPhone3;
      const inquiryPhone4 = this.from.inquiryPhone4;
      const familyPhone = this.from.familyPhone;
      const familyPhone2 = this.from.familyPhone2;

      switch (this.step) {
        case 1:
          // if (this.from.applicationPosition && this.from.applicationYear > 0 && this.from.applicationMonth > 0 && this.from.applicationDay > 0) {
          this.step++;
          // } else if (this.from.applicationPosition === '') {
          //   this.$message.error('请填写申请职位');
          // } else if (this.from.applicationYear === '' || this.from.applicationMonth === '' || this.from.applicationDay === '') {
          //   this.$message.error('请填写申请日期');
          // } else if (this.from.applicationYear <= 0 || this.from.applicationMonth <= 0 || this.from.applicationDay <= 0) {
          //   this.$message.error('请填写正确的申请日期');
          // }
          break;
        case 2:
          // if (this.from.name && this.from.gender && this.from.birthYear && this.from.birthMonth && this.from.birthDay && this.from.birthYear > 0 && this.from.birthMonth > 0 && this.from.birthDay > 0) {
          this.step++;
          // }
          // else if (this.from.name === '') {
          //   this.$message.error('请填写姓名');
          // } else if (this.from.gender === '') {
          //   this.$message.error('请填写性别');
          // } else if (this.from.birthYear === '' || this.from.birthMonth === '' || this.from.birthDay === '') {
          //   this.$message.error('请填写出生年月');
          // } else if (this.from.birthYear <= 0 || this.from.birthMonth <= 0 || this.from.birthDay <= 0) {
          //   this.$message.error('请填写正确的出生年月');
          // }
          break;
        case 3:
          // if (this.from.hometown && this.from.height && this.from.educationLevel && this.from.major && this.from.graduationSchool && this.from.married && this.from.healthCondition && this.from.height > 0 && this.from.language >= 0) {
          this.step++;
          // }
          // else if (this.from.hometown === '') {
          //   this.$message.error('请填写籍贯');
          // } else if (this.from.height === '') {
          //   this.$message.error('请填写身高');
          // } else if (this.from.educationLevel === '') {
          //   this.$message.error('请填写文化程度');
          // } else if (this.from.major === '') {
          //   this.$message.error('请填写专业');
          // } else if (this.from.graduationSchool === '') {
          //   this.$message.error('请填写毕业学校');
          // } else if (this.from.married === '') {
          //   this.$message.error('请填写婚否');
          // } else if (this.from.healthCondition === '') {
          //   this.$message.error('请填写健康状况');
          // } else if (this.from.language === '') {
          //   this.$message.error('请填写语言能力');
          // } else if (this.from.languageLevel === '') {
          //   this.$message.error('请填写语言能力级别');
          // } else if (this.from.height <= 0) {
          //   this.$message.error('请填写正确的身高');
          // } else if (this.from.language < 0) {
          //   this.$message.error('请填写正确的语言能力级别');
          // }
          break;
        case 4:
          // if (!phoneRegex.test(contactPhone) && contactPhone !== '') {
          //   this.$message.error('请输入有效的联系电话');
          //   return;
          // }
          // if (this.from.otherSkills && this.from.specialty && this.from.currentAddress && this.from.contactPhone && this.from.jobInfoSource && this.from.expectedSalary && this.from.earliestStartYear > 0 && this.from.earliestStartMonth > 0 && this.from.earliestStartDay > 0) {
          this.step++;
          // } else if (this.from.otherSkills === '') {
          //   this.$message.error('请填写其他技能或持有专业证照');
          // } else if (this.from.specialty === '') {
          //   this.$message.error('请填写特长');
          // } else if (this.from.currentAddress === '') {
          //   this.$message.error('请填写现住地址');
          // } else if (this.from.contactPhone === '') {
          //   this.$message.error('请填写联系电话');
          // } else if (this.from.jobInfoSource === '') {
          //   this.$message.error('请填写职位信息来源');
          // } else if (this.from.expectedSalary === '') {
          //   this.$message.error('请填写期望薪酬');
          // } else if (this.from.earliestStartYear === '' || this.from.earliestStartMonth === '' || this.from.earliestStartDay === '') {
          //   this.$message.error('请填写最快到职日期');
          // } else if (this.from.earliestStartYear <= 0 || this.from.earliestStartMonth <= 0 || this.from.earliestStartDay <= 0) {
          //   this.$message.error('请填写正确的最快到职日期');
          // }
          break;
        case 5:
          // if (!phoneRegex.test(emergencyContactPhone) && emergencyContactPhone !== '') {
          //   this.$message.error('请输入有效的紧急联系人电话');
          //   return;
          // }
          // if (this.from.emergencyContactName && this.from.emergencyContactRelation && this.from.emergencyContactAddress && this.from.emergencyContactPhone) {
          this.step++;
          // } else if (this.from.emergencyContactName === '') {
          //   this.$message.error('请填写紧急联系人姓名');
          // } else if (this.from.emergencyContactRelation === '') {
          //   this.$message.error('请填写紧急联系人关系');
          // } else if (this.from.emergencyContactAddress === '') {
          //   this.$message.error('请填写紧急联系人通讯地址');
          // } else if (this.from.emergencyContactPhone === '') {
          //   this.$message.error('请填写紧急联系人电话');
          // }
          break;
        case 6:
          // if (this.from.schoolName && this.from.schoolMajor && this.from.schoolEducation && this.from.admissionYear && this.from.admissionMonth && this.from.graduationYear && this.from.graduationMonth && this.from.graduationStatus && this.from.hasCertificate) {
          this.step++;
          // } else if (this.from.schoolName === '') {
          //   this.$message.error('请填写学校名称');
          // } else if (this.from.schoolMajor === '') {
          //   this.$message.error('请填写专业');
          // } else if (this.from.schoolEducation === '') {
          //   this.$message.error('请填写学历');
          // } else if (this.from.admissionYear === '' || this.from.admissionMonth === '') {
          //   this.$message.error('请填写入学年月');
          // } else if (this.from.graduationYear === '' || this.from.graduationMonth === '') {
          //   this.$message.error('请填写毕业年月');
          // } else if (this.from.graduationStatus === '') {
          //   this.$message.error('请填写毕业或结业');
          // } else if (this.from.hasCertificate === '') {
          //   this.$message.error('请填写有否证件');
          // }
          break;
        case 7:
          this.step++;
          break;
        case 8:
          this.step++;
          break;
        case 9:
          // if (!phoneRegex.test(inquiryPhone) && inquiryPhone !== '') {
          //   this.$message.error('请输入有效的电话');
          //   return;
          // }
          // if (this.from.companyName && this.from.joinYear && this.from.joinMonth && this.from.leaveYear && this.from.leaveMonth && this.from.jobTitle && this.from.baseSalary && this.from.directSupervisor && this.from.leaveReason && this.from.inquiryPhone && this.from.workExperienceDetail) {
          this.step++;
          // } else if (this.from.companyName === '') {
          //   this.$message.error('请填写单位名称');
          // } else if (this.from.joinYear === '' || this.from.joinMonth === '') {
          //   this.$message.error('请填写到职年月');
          // } else if (this.from.leaveYear === '' || this.from.leaveMonth === '') {
          //   this.$message.error('请填写离职年月');
          // } else if (this.from.jobTitle === '') {
          //   this.$message.error('请填写工作职务');
          // } else if (this.from.baseSalary === '') {
          //   this.$message.error('请填写底薪');
          // } else if (this.from.directSupervisor === '') {
          //   this.$message.error('请填写直系主管');
          // } else if (this.from.leaveReason === '') {
          //   this.$message.error('请填写离职原因');
          // } else if (this.from.inquiryPhone === '') {
          //   this.$message.error('请填写查询电话');
          // } else if (this.from.workExperienceDetail === '') {
          //   this.$message.error('请填写详述工作经验');
          // }
          break;
        case 10:
          // if (!phoneRegex.test(inquiryPhone2) && inquiryPhone2 !== '') {
          //   this.$message.error('请输入有效的电话');
          //   return;
          // }
          this.step++;
          break;
        case 11:
          // if (!phoneRegex.test(inquiryPhone3) && inquiryPhone3 !== '') {
          //   this.$message.error('请输入有效的电话');
          //   return;
          // }
          this.step++;

          break;
        case 12:
          // if (!phoneRegex.test(inquiryPhone4) && inquiryPhone4 !== '') {
          //   this.$message.error('请输入有效的电话');
          //   return;
          // }
          this.step++;
          break;
        case 13:
          // if (!phoneRegex.test(familyPhone) && familyPhone !== '') {
          //   this.$message.error('请输入有效的电话');
          //   return;
          // }
          // if (this.from.familyName && this.from.familyRelation && this.from.familyAge && this.from.familyAddress && this.from.familyTitle && this.from.familyPhone) {
          this.step++;
          // } else if (this.from.familyName === '') {
          //   this.$message.error('请填写家庭成员姓名');
          // } else if (this.from.familyRelation === '') {
          //   this.$message.error('请填写家庭成员称谓');
          // } else if (this.from.familyAge === '') {
          //   this.$message.error('请填写家庭成员年龄');
          // } else if (this.from.familyAddress === '') {
          //   this.$message.error('请填写家庭成员任职机构或地址');
          // } else if (this.from.familyTitle === '') {
          //   this.$message.error('请填写家庭成员职称');
          // } else if (this.from.familyPhone === '') {
          //   this.$message.error('请填写家庭成员联络电话');
          // }
          break;
        case 14:
          // if (!phoneRegex.test(familyPhone2) && familyPhone2 !== '') {
          //   this.$message.error('请输入有效的电话');
          //   return;
          // }
          this.step++;
          break;
        case 15:
          // if (this.from.signature && this.from.signYear > 0 && this.from.signMonth > 0 && this.from.signDay > 0) {
          this.test();
          this.step++;
          // } else if (this.from.signature === undefined) {
          //   this.$message.error('请填写/保存申请人签名');
          // } else if (this.from.signYear === '' || this.from.signMonth === '' || this.from.signDay === '') {
          //   this.$message.error('请填写声明日期');
          // } else if (this.from.signYear <= 0 || this.from.signMonth <= 0 || this.from.signDay <= 0) {
          //   this.$message.error('请填写正确的声明日期');
          // }
          break;
      }
    },
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.from.imageUrl = e.target.result;
          // this.from.signature = e.target.result;
          // this.validateImageSize(file);
        };
        reader.readAsDataURL(file);
      }
    },
    test() {
      this.$router.push('/main/ruzhi/nuwentrytable');
      console.log(this.from);
      axios
        .post("/amsp/entry/save", this.from)
        .then((res) => {
          console.log(res);
          // 确保路由名称正确
          this.$router.push('/main/ruzhi/nuwentrytable');
        })
        .catch((error) => {
          console.error("Error saving data:", error);
        });
    },
    //   validateImageSize(file) {
    //     const img = new Image();
    //     img.onload = () => {
    //       const widthInMm = (img.width / 96) * 25.4; // 假设DPI为96
    //       const heightInMm = (img.height / 96) * 25.4;
    //       if (widthInMm !== 35 || heightInMm !== 49) {
    //         alert('图片尺寸必须为35mm x 49mm');
    //         this.imageUrl = '';
    //       }
    //     };
    //     img.src = URL.createObjectURL(file);
    //   }
  },
};
</script>
<style scoped>
/* 页面样式 */
body {
  font-family: '宋体';
  margin: 0;
  padding: 0;
  font-size: 18px;
}

img {
  width: 35mm;
  height: 49mm;
  object-fit: cover;
  /* 确保图片按比例缩放 */
}

.form-container {
  font-family: Arial, sans-serif;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

span {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  justify-content: flex-end;
  /* margin-right: 40%; */
  font-size: 18px;
}

input,
select,
textarea {
  padding: 8px;
  margin-left: 5px;
  border: 1px solid #ccc;
  border-radius: 0px;
  width: 200px;
  background-color: transparent;
  font-family: "宋体";
}

input:focus {
  outline: none;
  border-color: #007bff79;
}

select:focus {
  outline: none;
  border-color: #007bff79;
}

textarea:focus {
  outline: none;
  border-color: #007bff79;
}

.day {
  width: 51.5px;
}

button {
  padding: 5px 8px;
  background-color: #007bff;
  color: white;
  border: none;
  /* border-radius: 4px; */
  cursor: pointer;
  margin: 10px 3px;
}

button:hover {
  background-color: #0056b3;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
}

th,
td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

th {
  background-color: #f0f0f0;
}

.error {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}
</style>